﻿@using HouseHoldBudget.App_GlobalResources
@using HouseHoldBudget.Models.Budgets
@using Kendo.Mvc.UI
@model BudgetResultModel
@{
    ViewBag.Title = @CustomResources.ManageMyBudgets_Title;
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="section-header">
    <div class="title">
        <img src="@Url.Content("~/Content/images/budget.png")" alt="" />
        @CustomResources.ManageMyBudgets_Title
    </div>
</div>
<table class="content">
    <tr>
        <td>
            @(Html.Kendo().Grid<BudgetResultModel>()
                .Name("budgets-grid")
                .Columns(columns =>
                            {
                                columns.Bound(x => x.BudgetName)
                                    .Width(200)
                                    .Template(x => Html.ActionLink(x.BudgetName, "ShowBudget", "Budget", new { budgetId = x.Id }))
                                    .ClientTemplate("<a href=\"ShowBudget?budgetId=#= Id #\">#: BudgetName #</a>")
                                    .Title(@CustomResources.ManageMyBudgets_NameColumn);
                                columns.Bound(x => x.TotalIncomes)
                                    .Title("Total des revenus");
                                columns.Bound(x => x.TotalExpenses)
                                    .Title("Total des dépenses");
                                columns.Bound(x => x.TotalOutstanding)
                                    .Title("Reste");
                            })
                .Events(e=>e.DataBound("OnRowDatabound"))
                .DataSource(dataBinding => dataBinding.Ajax()
                                    .Model(model => model.Id(p => p.Id))
                                    .Read(read => read.Action("SelectAllBudgets", "Budget"))
                                    .PageSize(20))

                .Scrollable()
                .Sortable()
                .Filterable())  
        </td>
    </tr>
</table>

<script type="text/javascript">
    function OnRowDatabound(e) {
        var grid = $("#budgets-grid").data("kendoGrid");
        var data = grid.dataSource.data();
        $.each(data, function (i, row) {
            if (row.TotalOutstanding < 0) {
                $('tr[data-uid="' + row.uid + '"]').css("color", "red");
            }
        });
    }
</script>
